<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
        <style>
           #container div span{
               display: inline-block;
               width: 20px;
               height: 20px;
               line-height: 20px;
               color: #fff;
               cursor: pointer;
                text-align: center;
           }
           .btn_enable{
               background-color: #FF0000;
           }
           .btn_disable{
               background-color: #CCCCCC;
           }
           .num{
              border-style: none;
              border-bottom: #333 solid 1px;
           }
        </style>
    </head>
    <body>
        <div id="container">
            商品：华为手机<br>
            价格:2999<br>
            <div>
                <span @click="jian" :class="[num>1?'btn_enable':'btn_disable']">-</span>
                <span class="num" style="color: #333333;width: 50px;">{{num}}</span>
                <span class="btn_enable" @click="num++">+</span>
            </div>
        </div>
        <script>
           new Vue({
               el:"#container",
               data:{
                   num:1
               },
               methods:{
                   jian:function(a){
                       console.log("a>>>",a.target)
                       if(this.num>1){
                           this.num--;
                       }
                   }
               }
           });
        </script>
    </body>
</html>
